<template>
	<view class="userLayout pagepg">
		<view class="userInfo">
			<!-- #ifndef H5 -->
			<view class="" :style="{height:statusBarHeight+titleHeight+'px'}">
			</view>
			<!-- #endif -->
			<view class="avator">
				<image :src="userInfo.avatarUrl" mode="aspectFill" @click="wxLogin"></image>
			</view>
			<view class="ip">
				{{userInfo.username}}
			</view>
		</view>
		<view class="select">
			<view class="list">
				<view @click="goClass('download')" class="row">
					<view class="left">
						<uni-icons type="download-filled" size="20" color="#28b389"></uni-icons>
						<view class="text">我的下载</view>
					</view>
					<view class="right">
						<!-- <text>{{userInfo.downloadSize}}</text> -->
						<uni-icons type="right" size="20" color="#28b389"></uni-icons>
					</view>
				</view>
				<view @click="goClass('score')" class="row">
					<view class="left">
						<uni-icons type="star-filled" size="20" color="#28b389"></uni-icons>
						<view class="text">我的评分</view>
					</view>
					<view class="right">
						<!-- <text>{{userInfo.scoreSize}}</text> -->
						<uni-icons type="right" size="20" color="#28b389"></uni-icons>
					</view>
				</view>
				<view class="row">
					<view class="left">
						<uni-icons type="headphones" size="20" color="#28b389"></uni-icons>
						<view class="text" type>联系客服</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="20" color="#28b389"></uni-icons>
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click="talkPhone">联系客服</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="select">
			<view class="list">
				<view class="row" @click="goToUpdata">
					<view class="left">
						<uni-icons type="chatbubble-filled" size="20" color="#28b389"></uni-icons>
						<view class="text">订阅更新</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="20" color="#28b389"></uni-icons>
					</view>
				</view>
				<view class="row" @click="goToProment">
					<view class="left">
						<uni-icons type="notification-filled" size="20" color="#28b389"></uni-icons>
						<view class="text">常见问题</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="20" color="#28b389"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {onMounted, ref} from "vue"
import {request} from "../../utils/request.js"
import {useLoginStore} from "../../store/login"
const LoginStore = useLoginStore()
// #ifndef H5
let SYSTEM_INFO = uni.getSystemInfoSync()
let statusBarHeight = ref(SYSTEM_INFO.statusBarHeight)
let {top,height} = uni.getMenuButtonBoundingClientRect()
let titleHeight = ref(height+ (top - statusBarHeight.value)*2)
// #endif
let is_login = ref(false)
let userInfo = ref({
	username:'',
	avatarUrl:""
	})
onMounted(()=>{
	// getUserInfo()
	wxLogin()
})
function talkPhone(){
	uni.makePhoneCall({
		phoneNumber: '15260277727' //仅为示例
	});
}
//获取用户信息
const getUserInfo = () =>{
	request({
		url:"/userInfo",
		data:{
			
		}
	}).then(res=>{
		userInfo.value = res.data.data || {}
	})
}
//前往下载评分页面
const goClass = (type) =>{
	uni.navigateTo({
		url:"/pages/class-list/class-list?type="+type
	})
}
//微信登陆
const wxLogin = () =>{
	wx.getSetting({
	      success:function(res){
	        if(res.authSetting['scope.userInfo']){
	          uni.login({
	            success: function (loginRes) {
	              console.log("登录信息",loginRes);
				  // 获取用户信息
				  uni.getUserInfo({
				    provider: 'weixin',
				    success: function (infoRes) {
				  						   userInfo.value.username = infoRes.userInfo.nickName
				  						   userInfo.value.avatarUrl = infoRes.userInfo.avatarUrl
				  						   console.log("登录个人信息",infoRes)
				    }
				  });
				  //登录获取token
				  wx.request({
				    url: 'http://127.0.0.1:3000/login',
				    method:'POST',
				    data:{ code:loginRes.code },
				    success:(res)=>{
				    // 将请求成功的token打印
					   LoginStore.loginin(res.data.token)
					   // 获取用户信息
					   uni.getUserInfo({
					     provider: 'weixin',
					     success: function (infoRes) {
						   userInfo.value.username = infoRes.userInfo.nickName
						   userInfo.value.avatarUrl = infoRes.userInfo.avatarUrl
						   console.log("登录个人信息",infoRes)
					     }
					   });
				    }
				  })
	            }
	          });
	        }else{
	          //如果用户没有给与这个权限则  发送询问权限的请求
	          wx.authorize({
	            scope:"scope.userInfo",//询问授权的属性
	            success:function(res){
	              console.log(res)
	            }
	          })
	        }
	      }
	    })
	
}
//检查是否登录
const checkLogin = () =>{
	let token = LoginStore.token
    if(!token){
      // 从缓存中获取token
      token = wx.getStorageSync('token')
      if(token){
        LoginStore.loginin(token)
      }else{
        is_login.value = false
      }
    }
  
    // 发送请求检验token是否存在
    wx.request({
      url: 'http://127.0.0.1:3000/checklogin',
      data:{
        token : token
      },
      success:(res)=>{
        is_login.value = res.data.is_login
		console.log("登录状态",is_login.value);
      }
    })
}
//去订阅更新界面
const goToUpdata = () =>{
	uni.navigateTo({
		url:"/pages/notice/detail?publish_date="+1697974214505+"&type=updata"
	})
}
//去往常见问题界面
const goToProment = () =>{
	uni.navigateTo({
		url:"/pages/notice/detail?publish_date="+1698051468713+"&type=proment"
	})
}
</script>

<style lang="scss">
.userInfo{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 50rpx 0;
	.avator{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.ip{
		font-size: 44rpx;
		color: #333;
		padding: 20rpx 0 5rpx;
	}
	.address{
		font-size: 28rpx;
		color: #999;
		padding: 20rpx 0 5rpx;
	}
}
.select{
	width: 690rpx;
	margin: 50rpx auto;
	border: 1px solid #eee;
	border-radius: 15rpx;
	box-shadow: 0 0 30rpx rgba(0,0,0,0.05);
	.list{
		.row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 100rpx;
			border-bottom: 1px solid #eee;
			position: relative;
			&:last-child{border-bottom: 0;}
			button{
				width: 100%;
				height: 100rpx;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
			}
			.right{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 37rpx;
				text{
					color: #e1e1e1;
				}
			}
			.left{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 37rpx;
			}
		}
	}
}
</style>
